<template>
	<view>
		<view class="pub-v2">
			<textarea class="pub-v2-h1" v-model="articleContent" maxlength="2000" placeholder="请输入话题内容..." />
			<view class="pub-v2-h3">
				<image class="icon" @tap="selectEmoji" src="../../static/images/emoji/emoji.png" mode="heightFix"></image>
			</view>
		</view>
		<view class="pub-v3">
			<text class="articled-t3-a4" v-html="$options.filters.formatMinions(articleContent,minions)"></text>
		</view>
		<Emoji :add-emoji="addEmoji" v-on:cancle="emojiFlag = false" v-if="emojiFlag" />
	</view>
</template>

<script>
	import Emoji from '@/components/emoji'
	export default {
		data() {
			return {
				emojiFlag:false,
				articleContent:'',
				minions:{
					'[小黄人-微笑]':'f0/xhrnew_weixiao_org.png',
					'[小黄人-剪刀手]':'63/xhrnew_jiandaoshou_org.png',
					'[小黄人-不屑]':'b2/xhrnew_buxie_org.png',
					'[小黄人-高兴]':'41/xhrnew_gaoxing_org.png',
					'[小黄人-惊讶]':'fd/xhrnew_jingya_thumb.png',
					'[小黄人-委屈]':'79/xhrnew_weiqu_org.png',
					'[小黄人-坏笑]':'be/xhrnew_huaixiao_thumb.png',
					'[小黄人-白眼]':'e2/xhrnew_baiyan_org.png',
					'[小黄人-无奈]':'15/xhrnew_wunai_org.png',
					'[小黄人-得意]':'c8/xhrnew_deyi_org.png'
				}
			}
		},
		components:{
			Emoji
		},
		filters:{
			formatMinions:function(content, minions){
				var res = ""
				if(content){
					res = content.replace(/\[(.*?)\]/gi,(item)=>{
						if(item.indexOf('小黄人-') != -1){
							let suffix = minions[item]
							return `<image class="emoji-sticker" src="https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/${suffix}" mode=""></image>`
						}
						return ""
					})
				}
				return res
			}
		},
		methods: {
			addEmoji(item){
				var articleContent = this.articleContent
				this.articleContent = articleContent + item
			},
			selectEmoji(){
				this.emojiFlag = true
			}
		}
	}
</script>

<style scoped lang="less">
	.pub-v3{
		width: 686rpx;
		margin: 35rpx auto 0 auto;
		font-size: 28rpx;
		color: #3B596D;
		.pub-v3-a1{
			word-break: break-all;
		}
	}
	.pub-v2{
		width: 653rpx;
		margin: 30rpx auto 0 auto;
		border-radius: 25rpx;
		border: 1rpx solid #a0a0a0 ;
		background-color: #fff;
		padding: 10rpx 0;
		.pub-v2-h1{
			width: 610rpx;
			margin: 0 auto 0 auto;
			font-size: 32rpx;
			color: #000;
			height: 250rpx;
		}
		.pub-v2-h3{
			width: 610rpx;
			margin: 5rpx auto 0 auto;
			display: flex;
			justify-content: flex-start;
			.icon{
				height: 41rpx;
				margin-left: 40rpx;
				
				&:nth-child(1){
					margin-left: 0;
				}
			}
		}
	}

</style>
